<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* EBM */
        .calender{
            width: 240px;
            position: absolute;
            top: 30%;
            left: 40%;
            box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
            padding: 5px;
            border-radius: 5px;
            border: 1px solid rgba(0, 0, 0, .5);
        }
        .calender::after, .calender::before{
            content: '';
            display: block;
            position: absolute;
            top: -10px;
            left: 15px;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid rgba(0, 0, 0, .5);
            z-index: 1;
        }
        .calender::before{
            top: -9px;
            border-bottom: 10px solid #fff;
            z-index: 2;
        }
        /* 标题 */
        .calender-header{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .calender-header__prve, .calender-header__next{
            font-family: '宋体';
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 2px;
            cursor: pointer;
        }
        .calender-header__prve:hover, .calender-header__next:hover{
            background-color: #ccc;
        }
        .calender-header__year_month{
            line-height: 30px;
        }
        /* 主体 */
        .calender-list{

        }
        /* 周一 - 周日 */
        .calender-caption{
            display: grid;
            grid-template-columns: repeat(7, calc(240px / 7));
            grid-template-rows: 36px;
            font-weight: bold;
            background-color: rgba(0, 0, 0, .2);
        }
        /* 日期矩阵 */
        .calender-table{
            display: grid;
            grid-template-columns: repeat(7, calc(240px / 7));
            grid-template-rows: repeat(6, 36px);
        }

        .calender-coll{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .calender-coll:hover{
            background-color: #23acf1;
            color: #fff;
            cursor: pointer;
        }
        .calender-coll__dark{
            color: #ccc;
            cursor: no-drop;
        }
        .calender-coll__dark:hover{
            background-color: transparent;
            color: #ccc;
            cursor: no-drop;
        }
    </style>
</head>
<body>
    <div class="calender">
        <div class="calender-header">
            <div class="calender-header__prve"> &lt; </div>
            <div class="calender-header__year_month">
                2020 年 08 月
            </div>
            <div class="calender-header__next" > &gt; </div>
        </div>
        <div class="calender-list">
            <div class="calender-caption">
                <div class="calender-coll">一</div>
                <div class="calender-coll">二</div>
                <div class="calender-coll">三</div>
                <div class="calender-coll">四</div>
                <div class="calender-coll">五</div>
                <div class="calender-coll">六</div>
                <div class="calender-coll">日</div>
            </div>
            <div class="calender-table">
                <div class="calender-coll calender-coll__dark">27</div>
                <div class="calender-coll calender-coll__dark">28</div>
                <div class="calender-coll calender-coll__dark">29</div>
                <div class="calender-coll calender-coll__dark">30</div>
                <div class="calender-coll calender-coll__dark">31</div>
                <div class="calender-coll">1</div>
                <div class="calender-coll">2</div>

                <div class="calender-coll">3</div>
                <div class="calender-coll">4</div>
                <div class="calender-coll">5</div>
                <div class="calender-coll">6</div>
                <div class="calender-coll">7</div>
                <div class="calender-coll">8</div>
                <div class="calender-coll">9</div>

                <div class="calender-coll">10</div>
                <div class="calender-coll">11</div>
                <div class="calender-coll">12</div>
                <div class="calender-coll">13</div>
                <div class="calender-coll">14</div>
                <div class="calender-coll">15</div>
                <div class="calender-coll">16</div>

                <div class="calender-coll">17</div>
                <div class="calender-coll">18</div>
                <div class="calender-coll">19</div>
                <div class="calender-coll">20</div>
                <div class="calender-coll">21</div>
                <div class="calender-coll">22</div>
                <div class="calender-coll">23</div>

                <div class="calender-coll">24</div>
                <div class="calender-coll">25</div>
                <div class="calender-coll">26</div>
                <div class="calender-coll">27</div>
                <div class="calender-coll">28</div>
                <div class="calender-coll">29</div>
                <div class="calender-coll">30</div>

                <div class="calender-coll">31</div>
                <div class="calender-coll calender-coll__dark">1</div>
                <div class="calender-coll calender-coll__dark">2</div>
                <div class="calender-coll calender-coll__dark">3</div>
                <div class="calender-coll calender-coll__dark">4</div>
                <div class="calender-coll calender-coll__dark">5</div>
                <div class="calender-coll calender-coll__dark">6</div>

            </div>
        </div>
    </div>
</body>
</html>
